<template>
  <div class="home">
    <header>
      <ul>
        <li @click="toLocation"><van-icon name="location-o" color="#fff" /></li>
        <li>
          <van-search
            v-model="value"
            placeholder="搜索您想住的区域或小区"
            background="inherit"
            @focus="toHotSearch"
          />
        </li>
        <li @click="toMyMessage"><i class="iconfont icon-liaotian"></i></li>
      </ul>
    </header>
    <div class="banner">
      <div class="item">
        <img :src='dataList[currentIndex]'  />
      </div>
      <div class="page" v-if="this.dataList.length > 1">
        <ul>
          <li
            v-for="(item, index) in dataList"
            :key="index"
            @click="gotoPage(index)"
            :class="{ current: currentIndex == index }"
          ></li>
        </ul>
      </div>
    </div>
    <div class="function">
      <van-row>
        <van-col span="12">
          <router-link to="/findRoommate">找室友</router-link>
        </van-col>
        <van-col span="12">
          <router-link to="/ijuCommunity">宜居社区</router-link>
        </van-col>
      </van-row>
    </div>
    <div class="hotHousing">
      <h2>热门房源</h2>
      <ul v-if="dataTable">
        <li v-for="(item, index) in dataTable" :key="index" @click="toHouseDetails(item)">
          <img :src="item.rental_img" alt="" />
          <van-row justify="space-between">
            <van-col span="12">
              <p>{{item.rental_address}}</p>
              <p>{{item.rental_houseType}} - {{item.rental_area}} ㎡ </p>
            </van-col>
            <van-col span="12" class="right">
              <p> {{item.rental_rentalType}} </p>
              <p> {{item.rental_price}} 元/月 </p>
            </van-col>
          </van-row>
        </li>
      </ul>
      <ul v-else>
        当前地区暂无房源
      </ul>
    </div>
    <Footer></Footer>
  </div>
</template>

<script>
import Footer from "../../components/Footer.vue";
// import { getHomeSwiper } from "../../api/index"
import { getHomeHouse } from '../../api/index'
import { mapActions } from 'vuex'
export default {
  name: "Home",
  components: {
    Footer,
  },
  data() {
    return {
      // 后期后台获取图片数据
      dataList: [
        require('../../../public/swiper/1.png'),
        require('../../../public/swiper/2.png'),
        require('../../../public/swiper/3.png'),
      ],
      currentIndex: 0, //默认显示图片
      timer: null, //定时器
      value: "",
      dataTable: '',
      params: this.$store.state.params
    };
  },
  methods: {
    ...mapActions(['houseDetails']),
    gotoPage(index) {
      this.currentIndex = index;
    },
    runInv() {
      this.timer = setInterval(() => {
        // console.log();
        // console.log(this.dataList[this.currentIndex]);
        this.gotoPage(this.nextIndex);
      }, 2000);
    },
    toLocation() {
      this.$router.push('/location')
    },
    toMyMessage() {
      this.$router.push('/myMessage')
    },
    toHotSearch() {
      this.$router.push('./hotSearch')
    },
    async initHouseSources() {
      // console.log(this.params);
      if( window.localStorage.getItem('city') ){
        this.params.city = window.localStorage.getItem('city')
      }
      let { data } = await getHomeHouse(this.params)
      // console.log(data);
      // 展示信息处理
      let result = data.newResult.map( (item, index) => {
        let area = item.areaName.split('|')[1] + '区'
        let rentType = item.title.includes('整租') ? '整租' : '合租'
        return {
          rental_img: `http://127.0.0.1:3000/newImg/${item.carouselMap.split('|')[0]}`,
          rental_address: area + item.community,
          rental_houseType: item.roomTypeName,
          rental_area: item.size,
          rental_rentalType: rentType,
          rental_price: item.priceNum,
          id: item.ID
        }
      } )
      // 将房源信息存储到数组
      if(result.length !== 0) {
        this.dataTable = result
      }
    },
    toHouseDetails(data) {
      // console.log(data);
      this.$store.commit('setPrevPage', '/home')
      this.houseDetails([data.id,data.rental_address]);
      this.$router.push('/houseDetails')
    }
  },
  computed: {
    //上一张
    prevIndex() {
      if (this.currentIndex == 0) {
        return this.dataList.length - 1;
      } else {
        return this.currentIndex - 1;
      }
    },
    //下一张
    nextIndex() {
      if (this.currentIndex == this.dataList.length - 1) {
        return 0;
      } else {
        return this.currentIndex + 1;
      }
    },
  },
  created() {
    this.runInv();
    this.initHouseSources();
    this.$store.commit('setCity', this.$store.state.params.city)
  },
};
</script>

<style lang="less" scoped>
.home {
  text-align: center;
  header {
    height: 88px;
    width: 100%;
    background-color: rgb(255, 86, 86);
    ul {
      display: flex;
      li {
        line-height: 88px;
        &:nth-child(1) {
          margin-left: 20px;
          // margin-top: 32px;
          margin-right: 20px;
          font-size: 36px;
        }
        &:nth-child(2) {
          border-radius: 10px;
          overflow: hidden;
          margin-top: 16px;
        }
        .van-search {
          border-radius: 5px;
          padding: 0;
          width: 600px;
          .van-search__content {
            border-radius: 8px;
            height: 56px;
            /deep/.van-field__control {
              font-size: 26px;
              color: #8f8f8f;
              line-height: 46px;
            }
            /deep/.van-icon {
              font-size: 26px;
              color: #8f8f8f;
              font-weight: bold;
              line-height: 46px;
            }
          }
        }
        &:nth-child(3) {
          margin-left: 20px;
          // margin-top: 32px;
          i {
            font-size: 38px;
            color: #fff;
          }
        }
      }
    }
  }

  .function {
    margin: 24px 20px 29px 20px;
    .van-col {
      box-sizing: border-box;
      color: #fff;
      background: rgb(255, 86, 86);
      font-size: 30px;
      width: 343px;
      height: 130px;
      line-height: 130px;
      border-radius: 10px;
      letter-spacing: 2px;
      // font-weight: bold;
      a {
        color: #fff;
      }
      &:nth-child(1) {
        margin-right: 24px;
      }
    }
  }

  .hotHousing {
    width: 750px;
    margin-bottom: 90px;
    text-align: center;
    h2 {
      font-size: 24px;
      color: rgba(0, 0, 0, 0.8);
      text-align: left;
      margin-left: 20px;
      margin-bottom: 12px;
    }
    ul {
      li {
        position: relative;
        height: 344px;
        img {
          width: 100%;
          height: 344px;
        }
        margin-bottom: 20px;
        .van-row {
          width: 750px;
          box-sizing: border-box;
          padding-left: 120px;
          padding-right: 108px;
          position: absolute;
          bottom: 0;
          background: rgba(255, 255, 255, 0.7);
          .van-col {
            margin-top: 18px;
            margin-bottom: 18px;
            p {
              font-size: 24px;
              color: rgba(0, 0, 0, 0.8);
              &:nth-child(1) {
                margin-bottom: 22px;
              }
            }
            &:nth-child(2) {
              p {
                &:nth-child(1) {
                  width: 110px;
                  height: 50px;
                  line-height: 50px;
                  border: 1px solid #618698;
                  border-radius: 8px;
                  color: #618698;
                }
                &:nth-child(2) {
                  color: #f55;
                }
              }
            }
          }
          .right {
            p {
              &:nth-child(1) {
                margin-left: auto;
                margin-bottom: 0;
              }
              &:nth-child(2) {
                text-align: right;
                margin-top: 5px;
                margin-right: 8px;
              }
            }
          }
        }
      }
    }
  }
}

* {
  margin: 0;
  padding: 0;
}

.banner {
  max-width: 1200px;
  margin: 0 auto;
  position: relative;
  .page {
    position: absolute;
    bottom: 0;
    height: 30px;
    ul {
      width: 750px;
      flex: 1;
      display: flex;
      justify-content: center;
      align-items: center;
      li {
        list-style: none;
        margin-right: 10px;
        border-radius: 50%;
        width: 10px;
        height: 10px;
        cursor: pointer;
        background: rgba(255, 255, 255, 0.5);
      }
      .current {
        background-color: #ff6700;
      }
    }
  }
}
.banner img {
  width: 750px;
  height: 325px;
  display: block;
}
// .banner .page ul {
//     float: right;
// }
</style>
